<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>穷游网</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./icomoon/style.css" />

    <script src="./js/flexible.js"></script>
  </head>

  <body>
    <!-- header -->
    <header>
      <a href="#" class="logo">
        <h1>穷游网</h1>
      </a>
      <i class="icon-search"></i>
      <input type="search" placeholder="搜索目的地、游记攻略等" />
      <a href="#" class="user">
        <img src="./images/user.jpg" alt="" />
      </a>
    </header>

    <!-- banner -->
    <div class="banner">
      <img src="./upload/banner.jpg" alt="" />
    </div>
    <!-- nav -->
    <nav>
      <a href="#">
        <img src="./images/nav1.jpg" alt="" />
        <p>锦囊</p>
      </a>
      <a href="#">
        <img src="./images/nav2.jpg" alt="" />
        <p>行程助手</p>
      </a>
      <a href="#">
        <img src="./images/nav3.jpg" alt="" />
        <p>游记</p> </a
      ><a href="#">
        <img src="./images/nav4.jpg" alt="" />
        <p>Biu</p> </a
      ><a href="#">
        <img src="./images/nav5.jpg" alt="" />
        <p>问答</p> </a
      ><a href="#">
        <img src="./images/nav6.jpg" alt="" />
        <p>目的地</p> </a
      ><a href="#">
        <img src="./images/nav7.jpg" alt="" />
        <p>酒店</p> </a
      ><a href="#">
        <img src="./images/nav8.jpg" alt="" />
        <p>商城</p> </a
      ><a href="#">
        <img src="./images/nav9.jpg" alt="" />
        <p>约伴</p> </a
      ><a href="#">
        <img src="./images/nav10.jpg" alt="" />
        <p>专栏</p>
      </a>
    </nav>
    <!-- body -->
    <div class="qy_bd w">
      <div class="qy_bd_hd">
        <h3>精选攻略</h3>
        <a href="#">
          <i class="icon-information-solid"></i>
          出境安全提示
          <i class="icon-cheveron-right"></i
        ></a>
      </div>

      <div class="qy_all_items">
        <div class="qy_item">
          <a href="#">
            <img src="./upload/gl1.jpg" alt="" />
            <p>
              2019墨西哥亡灵节最全攻略从 <br />《寻梦环游记》知道了亡灵开始11111
            </p>
          </a>
          <span
            ><p>程程与星爷旅食记</p>
            <em><i class="icon-heart"></i>603</em>
          </span>
        </div>
        <div class="qy_item">
          <a href="#">
            <img src="./upload/gl1.jpg" alt="" />
            <p>
              2019墨西哥亡灵节最全攻略从 <br />《寻梦环游记》知道了亡灵开始11111
            </p>
          </a>
          <span
            ><p>程程与星爷旅食记</p>
            <em><i class="icon-heart"></i>603</em>
          </span>
        </div>
        <div class="qy_item">
          <a href="#">
            <img src="./upload/gl1.jpg" alt="" />
            <p>
              2019墨西哥亡灵节最全攻略从 <br />《寻梦环游记》知道了亡灵开始11111
            </p>
          </a>
          <span
            ><p>程程与星爷旅食记</p>
            <em><i class="icon-heart"></i>603</em>
          </span>
        </div>
        <div class="qy_item">
          <a href="#">
            <img src="./upload/gl1.jpg" alt="" />
            <p>
              2019墨西哥亡灵节最全攻略从 <br />《寻梦环游记》知道了亡灵开始11111
            </p>
          </a>
          <span
            ><p>程程与星爷旅食记</p>
            <em><i class="icon-heart"></i>603</em>
          </span>
        </div>
      </div>
    </div>
  </body>
</html>
